<template>
	<view class="wrap">
		<view class="list-cell">
			<image class="user-images" :src="userInfo.avatar" />
			<view class="user-name">
				<span>{{userInfo.nickname}}</span>
				<u-icon size="32" color="#f04d94" name="man" class='sex-icon' />
				<br>
				<span class="user-other">{{role}}</span>
			</view>
		</view>
		<u-gap height="20" bg-color="#f5f5f5" />
		<u-cell-group :border="false">
			<u-cell-item title="所在地" :value="userInfo.address" icon="home" :title-width="180" :arrow="true" />
			<!-- 教师 -->
			<view v-if="teacher">
				<u-cell-item title="签约场馆" value="暂无" icon="file-text" :title-width="180" :arrow="false" />
				<u-cell-item title="教练认证" :value="userInfo.teacher.authentication===1?'官方认证':'暂未认证'" icon="account"
					:title-width="180" :arrow="false" />
				<u-cell-item title="擅长流派" :value="getGenre(userInfo.teacher.genre)" icon="account" :title-width="180"
					:arrow="false" />
				<u-cell-item title="标准费用" :value="userInfo.teacher.fee+' 元 / 次'" icon="account" :title-width="180"
					:arrow="false" />
				<u-cell-item title="空闲时间" :value="userInfo.teacher.time" icon="account" :title-width="180"
					:arrow="false" />
			</view>
			<u-cell-item title="手机" class="connect" :value="userInfo.phone" icon="phone" :title-width="180"
				:arrow="false" />
			<u-cell-item title="微信" class="connect" :value="userInfo.weixin" icon="weixin-circle-fill"
				:title-width="180" :arrow="false" />
			<u-cell-item title="邮箱" class="connect" :value="userInfo.email" icon="email" :title-width="180"
				:arrow="false" />
			<u-gap height="20" bg-color="#f5f5f5" />
			<!-- 场馆 -->
			<view v-if="venue">
				<u-cell-item title="简介" :value="userInfo.venue.info" icon="account" :title-width="180" :arrow="false" />
				<!-- 图片部分 -->
				<u-grid :col="2" :border="false">
					<u-grid-item v-if="userInfo.venue.image1" style='padding:0 10rpx;'>
						<u-image width="100%" height="300rpx" :src="userInfo.venue.image1" />
					</u-grid-item>
					<u-grid-item v-if="userInfo.venue.image2" style='padding:0 10rpx;'>
						<u-image width="100%" height="300rpx" :src="userInfo.venue.image2" />
					</u-grid-item>
					<u-grid-item v-if="userInfo.venue.image3" style='padding:0 10rpx;'>
						<u-image width="100%" height="300rpx" :src="userInfo.venue.image3" />
					</u-grid-item>
					<u-grid-item v-if="userInfo.venue.image4" style='padding:0 10rpx;'>
						<u-image width="100%" height="300rpx" :src="userInfo.venue.image4" />
					</u-grid-item>
				</u-grid>
			</view>
			<u-gap height="20" bg-color="#f5f5f5" />



		</u-cell-group>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="order">预约</u-button>
			<u-button class="btn" type="default" @click="talk">私聊</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				teacher: false,
				venue: false,
				role: ''
			}
		},
		onLoad(val) {
			console.log(val)
			if (val.type === '0') {
				this.userInfo = this.$store.state.friendList[val.uid]
			} else if (val.type === '1') {
				this.userInfo = this.$store.state.focusList[val.uid]
			} else if (val.type === '2') {
				this.userInfo = this.$store.state.fansList[val.uid]
			} else if (val.type === '3') {
				this.userInfo = this.$store.state.nearbyTeacherList[val.uid]
			}
			let rid = this.userInfo.rid
			if (rid === 101) {
				this.role = '普通用户'
			} else if (rid === 102) {
				this.role = '教练'
				this.teacher = true
			} else if (rid === 103) {
				this.role = '场馆'
				this.venue = true
			}


		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			order() {
				this.$u.toast("预约成功")
			},
			talk() {
				this.$u.toast("开始私聊")
			},
			getGenre(val) {
				if (val === '601') {
					return '游泳'
				} else if (val === '602') {
					return '瑜伽'
				} else if (val === '603') {
					return '力量训练'
				} else if (val === '604') {
					return '有氧运动'
				}
			}
		}
	};
</script>

<style lang="scss">
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;

	}

	.user-images {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
		border-radius: 50%;
		margin-right: 20px;
		margin-left: 5px;
	}

	.user-name {
		font-size: 32rpx;
		color: #000000;

		span {}

		.user-other {
			font-size: 26rpx;
			color: #999999;
			font-weight: normal;
		}

		.sex-icon {
			margin-left: 10rpx;
		}
	}
</style>
